<template>
  <rx-layout>
    <div slot="center">
      <rx-fit :isheader="isheader">
        <div slot="toolheader" border="false" foldbtn="false">
          <div class="table-operator" >
            <a-button  type="primary" icon="plus" @click="add">{{$ti18('rxList.newBtn','新建')}}</a-button>
              <a-button type="primary" v-if="selectedRowKeys.length > 0 " icon="delete" @click="delByRowsAndKeys(selectedRowKeys,selectedRows)">{{$ti18('rxList.delBtn','删除')}}</a-button>

          </div>
           <span class="search-btn-box"  v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
        </div>
        <div  btnalign="right" slot="searchbar"  v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
             <a-form-item :label="i18n('form.relName','关系名')">
                    <a-input :placeholder="i18n('form.relName','关系名','input')" v-model="queryParam.Q_NAME__S_LK" />
                  </a-form-item>
              </a-col>
              <a-col :span="colSpan">
             <a-form-item :label="i18n('form.relType','关系类型')">
                 <a-select :placeholder="i18n('form.relType','关系类型','input')" allowClear v-model="queryParam.Q_REL_TYPE__S_LK" :options="relTypeOptions" />
             </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
          ref="table"
          :bordered="isBorder"
          :allowRowSelect="true"
          :multiSelect="true"
          :columns="columns"
          :defaultPageSize="10"
          url="/api-user/user/org/osRelType/query"
          :queryParam="queryParam"
          data-field="result.data"
          :pageSizeOptions="['10','30','40']"
          id-field="id"
          @selectChange="onSelectChange"
          :getCheckboxProps="getCheckboxProps"
        >
          <span slot="relType" slot-scope="{text}">
            {{getRelType(text)}}
          </span>
           <span slot="action" slot-scope="{text, record}" class="actionIcons">
            <span  @click="edit(record)" v-if="canEdit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
            <span  @click="delByIds([record.id])" v-if="record.tenantId!='0'">{{$ti18('rxList.delBtn','删除')}}</span>
            <span v-show="record.relType=='USER-USER'" @click="relDefinition(record)" :title="i18n('list.relDefine','关系定义')">{{i18n('list.relDefine','关系定义')}}</span>
          </span>
        </rx-grid>
      </rx-fit>


    </div>
  </rx-layout>
</template>

<script>
import osRelTypeApi from '@/api/user/org/osRelType'
import OsRelTypeEdit from './OsRelTypeEdit.vue'
import RelDefinition from './RelDefinition.vue'
import userState from "@/assets/js/userState";
import { BaseList, RxLayout,RxGird,RxFit,Util } from "@lowcode/jpaas-common-lib";


export default {
  name: 'TableList',
  mixins: [BaseList,userState],
  components: {
    OsRelTypeEdit,
    RxLayout,
    RxGird,
    RxFit
  },

  data() {
    return {
      form: this.$form.createForm(this),
      queryParam: {},
      // 表头
      columns: [
        {title: this.i18n('form.relName','关系名'),dataIndex: 'name',width: 140 },
        {title: this.i18n('form.alias','别名'),dataIndex: 'key',width: 140 },
        {title: this.i18n('form.relType','关系类型'), dataIndex: 'relType', width: 120, scopedSlots: { customRender: 'relType' }},
        {title: this.i18n('form.currPartyName','当前方名称'),dataIndex: 'party1', width: 80, },
        {title: this.i18n('form.relPartyName','关联方名称'),dataIndex: 'party2',width: 80 },
        {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},
        {title: this.$ti18('rxList.action','操作'), width: 120, dataIndex: 'action',scopedSlots: { customRender: 'action' },size:3}
      ],
      relTypeOptions:[
          {label:this.i18n('form.USER_USER','用户间关系'),value:'USER-USER'},
          {label:this.i18n('form.GROUP_GROUP','用户组间关系'),value:'GROUP-GROUP'},
          {label:this.i18n('form.GROUP_USER','用户与组关系'),value:'GROUP-USER'},
          {label:this.i18n('form.REL_USER','组关系用户'),value:'REL-USER'}
      ],
      component: OsRelTypeEdit,
      comment: this.i18n('list.relDefine','关系定义'),
      widthHeight: ['1000px', '600px'],
      removeEnable: true,
    }
  },
  filters: {


    relTypeFilter(text){
      const relTypeAry={
          'USER-USER':'用户间关系',
          'GROUP-GROUP':'用户组间关系',
          'GROUP-USER':'用户与组关系',
          'REL-USER':'组关系用户'
      };
      return relTypeAry[text];
    }
  },
  methods: {
      delByRowsAndKeys(selectedRowKeys,selectedRows) {
          //判断是否有默认的关系类型，默认的类型不允许删除
          var unEnableDeleteAry = selectedRows.filter(item => item.tenantId == 0)
          let self_ = this;
          this.$confirm({
              title: this.$ti18('rxMsa.actionTips','操作提示'),
              zIndex: 20000,
              content: this.$ti18('rxMsa.delInfo','删除询问'),
              okText: this.$ti18('rxForm.okBtn','确认'),
              cancelText: this.$ti18('rxForm.cancelBtn','取消'),
              onOk() {
                  if (unEnableDeleteAry.length > 0){
                      var deleteMsg = self_.i18n('msg.default','默认的');
                      unEnableDeleteAry.forEach(item => {
                          deleteMsg = deleteMsg.concat(self_.i18n('msg.relName','关系名为:'), item.name, self_.i18n('msg.relType','关系类型为:'), item.relType)
                      })
                      self_.$message.error(deleteMsg + self_.i18n('msg.cannotDelete','不能删除'))
                      return;
                  }
                  self_.delById(selectedRowKeys).then(res => {
                      if (res.success && res.code == 200) {
                          self_.refreshGrid()
                      }
                      self_.selectedRowKeys = [];
                      self_.selectedRows = [];
                  })
              },
              onCancel() {
              }
          })
      },
    i18n(name,text,key){
        return this.$ti18(name,text,"osRelType",key);
    },
    getRelType(text){
        const relTypeAry={
            'USER-USER':this.i18n('form.USER_USER','用户间关系'),
            'GROUP-GROUP':this.i18n('form.GROUP_GROUP','用户组间关系'),
            'GROUP-USER':this.i18n('form.GROUP_USER','用户与组关系'),
            'REL-USER':this.i18n('form.REL_USER','组关系用户')
        };
        return relTypeAry[text];
    },
    //一开始调用数据
    getListByParams(parameter) {
      return osRelTypeApi.query(parameter)
    },
    // 删除
    delById(ids) {
      return osRelTypeApi.del({ ids: ids.join(',') })
    },
    relDefinition(relation){
      Util.open({
        component:RelDefinition,
        curVm:this,
        widthHeight:['500px','600px'],
        title: this.i18n('list.relDefine','关系定义'),
        data:{
          relation:relation,
        }
      },function (action,data){});
    },
     search(){
         this.$refs.table.loadData();
      },
      cancel(){
        this.resetSearch();
      },
    closeSearchbar(){
      //关闭过滤弹窗；（点击X触发）
      this.fitSearch = false ;
    },
  }
}
</script>
